<template>
  <a-row>
    <a-col :span="24">
        <a-form class="config-form" layout="vertical" :model="tcpConfig">
            <a-row type="flex" :gutter="8">
                <a-col >
                    <a-form-item label="IP地址">
                        <a-input v-model:value="tcpConfig.ip"></a-input>
                    </a-form-item>
                </a-col>
                <a-col >
                    <a-form-item label="端口号">
                        <a-input v-model:value="tcpConfig.port"></a-input>
                    </a-form-item>
                </a-col>
                <a-col>
                    <a-form-item label=" ">
                        <a-space>
                            <a-button @click="connect" v-if="!status">连接</a-button>
                            <a-button danger @click="close" v-else>关闭</a-button>
                        </a-space>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-col>
    <a-col :span="24">
        <cmd-form title="01H指令（读线圈寄存器）" :show-result="false" @submit="readCoils" />
        <cmd-form title="02H指令（读离散寄存器）" :show-result="false" @submit="readDiscreteInputs" />
        <cmd-form title="03H指令（读保持寄存器）" :show-result="false" @submit="readHolding" />
        <cmd-form title="04H指令（读输入寄存器）" :show-result="false" @submit="readInput" />
        <cmd-form title="05H指令（写单个线圈寄存器）" checked :show-result="false" @submit="writeFC5" />
        <cmd-form title="06H指令（写单个保持寄存器）" :show-result="false" @submit="writeFC6" />

      <section class="code-box-meta">
          <div class="code-box-title">
              <span>自定义指令</span>
          </div>
          <div class="code-box-description">
            <a-form layout="inline" :model="custom">
                <a-form-item label="指令">
                    <a-input style="width: 300px;" v-model:value="custom.value" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="send">发送</a-button>
                </a-form-item>
            </a-form>
          </div>
      </section>

    </a-col>
  </a-row>
</template>

<script>
import { ipc } from '@/utils/ipcRenderer'
import CmdForm from '@/components/cmdForm.vue'
const tcp = 'controller.netTCP.';
export default {
    components: {
        CmdForm
    },
  data () {
    return {
      tcpConfig: {
          ip: '192.168.0.80',
          port: 10123
      },
      custom: {
        value: '',
      },
      customeResult: '',
      
    }
  },
  computed: { 
        status () {
            return this.$store.state.tcpStatus
        }
  },
  mounted () {

  },
  methods: {
    connect () { 
        ipc.invoke(tcp + 'connect', { ...this.tcpConfig }).then(res => { 
            if (res.status) {
                // 检查连接状态
                this.$store.state.tcpStatus = true
            } else {
                this.$message.error(res.msg)
            }
        })
    },
    close () { 
        ipc.invoke(tcp + 'close', {}).then(res => { 
            if (res.status) {
                this.$store.state.tcpStatus = false
                this.$message.success('关闭成功')
            } else {
                this.$message.error(res.msg)
            }
        })
    },
    send () { 
        let args = { ...this.custom }
        args.value = this.custom.value.replaceAll(' ', '')
        if (!args.value) {
            this.$message.error('请输入指令')
            return
        }
        ipc.invoke(tcp + 'send', args).then(res => { 
            if (res.status) {
                this.$message.success('发送成功')
            } else {
                this.$message.error(res)
            }
        })
    },

    readCoils (e) {
        ipc.invoke(tcp + 'read', { ...e, functionCode: 1 }).then(res => {
            console.log(res)
        })
    },
    readDiscreteInputs (e) {
        ipc.invoke(tcp + 'read', { ...e, functionCode: 2 }).then(res => {
            console.log(res)
        })
    },
    readHolding (e) {
        ipc.invoke(tcp + 'read', { ...e, functionCode: 3 }).then(res => {
            console.log(res)
        })
    },
    readInput (e) {
        ipc.invoke(tcp + 'read', { ...e, functionCode: 4 }).then(res => {
            console.log(res)
        })
    },
    writeFC5 (e) {
        e.len = e.state ?  65280 : 0
        ipc.invoke(tcp + 'read', { ...e, functionCode: 5 }).then(res => {
            console.log(res)
        })
    },
    writeFC6 (e) {
        ipc.invoke(tcp + 'read', { ...e, functionCode: 6 }).then(res => {
            console.log(res)
        })
    },
    

  }

}
</script>

<style scoped>
.result { 
    font-size: 1.2em;margin-left: 10px;
}
.result > b { 
    margin-right: 5px;
}

.out-box { 
 max-height: 420px;
 overflow-y: auto;
 min-height: 40px;
}
</style>